<template>
    <div class="listingMask">
        <div>
            <header>
                <span></span>
                <h3>{{ listing.maskTitle }}</h3>
                <b @click="() => {
                    listing.setMaskShow('', 0)
                }">×</b>
            </header>
            <main>
                <el-form :model="form" label-width="auto">
                    <el-form-item label="编号:">
                        <el-input v-model="form.bianhao" v-if="listing.maskTitle === '编辑'" disabled />
                        <el-input v-model="form.bianhao" v-else-if="listing.maskTitle === '新增'" />
                    </el-form-item>
                    <el-form-item label="房源名称:">
                        <el-input v-model="form.names" />
                    </el-form-item>
                    <el-form-item label="单价:">
                        <el-input v-model="form.pre" />
                    </el-form-item>
                    <el-form-item label="总价:">
                        <el-input v-model="form.sum" />
                    </el-form-item>
                    <el-form-item label="房源状态:">
                        <el-select v-model="form.status">
                            <el-option label="发布中" value="发布中" />
                            <el-option label="已售出" value="已售出" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="显示状态:">
                        <el-select v-model="form.display">
                            <el-option label="隐藏" value="0" />
                            <el-option label="显示" value="1" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </main>
            <footer>
                <el-button type="primary" @click="changeDisplay()">确认</el-button>
                <el-button @click="() => {
                    listing.setMaskShow('', 0)
                }">取消</el-button>
            </footer>
        </div>
    </div>
</template>
<script setup lang="ts">
import useListing from '@store/listing'
import { defineProps } from 'vue';
import { setListing, addLis } from '@api/index'
let listing = useListing();
let props = defineProps(['form', 'getData'])

function changeDisplay() {
    if (listing.maskTitle === '编辑') {
        // 修改后端数据
        setListing({ bianhao: listing.data[listing.nowClick].bianhao, obj: props.form })
        // 重新获取数据刷新页面
        props.getData();
        //关闭弹框
        listing.setMaskShow('', 0)
    } else if (listing.maskTitle === '新增') {
        addLis(props.form);
        // 重新获取数据刷新页面
        props.getData();
        //关闭弹框
        listing.setMaskShow('', 0)
    }
}

</script>
<style scoped lang="scss">
.listingMask {
    position: fixed;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;

    >div {
        width: 600px;
        background-color: #fff;
        padding: 10px;

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            >h3 {
                font-size: 16px;
            }

            >b {
                font-weight: bold;
                font-size: 18px;
                cursor: pointer;
            }
        }

        main {
            margin: 20px 0;

            >div {
                display: flex;
                align-items: center;
                margin-top: 20px;

                p {
                    font-size: 16px;
                    width: 100px;
                }

                input {
                    width: 80%;
                    height: 30px;
                    padding-left: 10px;
                }
            }
        }

        footer {
            width: 100%;
            display: flex;
            justify-content: right;
            align-items: center;
            padding: 10px 0;

            button {
                margin-right: 10px;
            }
        }
    }
}
</style>